import { FC } from "react"

//引入useMatch
import { useMatch, Navigate, useLocation } from "react-router-dom"

import queryString from "query-string"

let Friend: FC<any> = props => {

    //useMatch相当于以前props中的match属性
    //不同的地方在于,这个useMatch中需要传入被匹配的路径,当匹配成的时候就会返回一个匹配对象
    let match = useMatch("/friend") //当浏览器的地址变成/friend的时候,useMatch就会匹配成功
    console.log(match)

    let location = useLocation()

    console.log(location)

    //获取query参数
    console.log(queryString.parse(location.search))

    return (
        <fieldset>
            <legend>朋友</legend>
            <h1>高启强</h1>
            <h1>疯驴子</h1>
            <h1>老墨</h1>
            <h1>刀哥</h1>
            <h1>麻子</h1>
            <h1>小虎</h1>
            {/* 重定向组件,使用Navigate替代redirect */}
            {/* <Navigate to="/discover" /> */}
        </fieldset>
    )
}

export default Friend